<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业 · 2021-03-31</title>

    <style>
        header {
            margin: 60px auto 0;
            text-align: center;
        }

        .container {
            display: flex;
            flex-direction: column;
            margin: 10px auto;
            padding: 10px;
            width: 300px;
            border: 1px solid #000;
            background-color: #fff;
        }

        .viewport {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
            width: 100%;
            height: 80px;
            border: 1px solid #ccc;
        }

        .viewport div {
            padding: 6px;
            height: 50%;
            text-align: right;
        }


        .viewport .steps {
            color: #666;
            font-size: 18px;
        }

        .viewport .result {
            color: #000;
            font-size: 24px;
            overflow-x: auto;
            overflow-y: hidden;
        }

        .button-group {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 10px;
        }

        .button-group div {
            display: grid;
            place-items: center;
            height: 40px;
            background-color: #E1E1E1;
            font-weight: bold;
            border: 1px solid #999;
            cursor: pointer;
            user-select: none;
        }

        .button-group div:active {
            filter: brightness(.8);
            transition: all .2s;
        }

        /* 计算结果 */
        ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            background-color: #f5f5f5;
        }

        ::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
            border-radius: 10px;
            background-color: #fff;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
            background-color: #ccc;
        }
    </style>
</head>
<body>

    <header>整数运算</header>

    <section class="container">
        <div class="viewport">
            <div class="steps"></div>
            <div class="result">整数运算</div>
        </div>

        <div class="button-group">
            <div class="num">7</div>
            <div class="num">8</div>
            <div class="num">9</div>
            <div class="operation division">/</div>
            <div class="num">4</div>
            <div class="num">5</div>
            <div class="num">6</div>
            <div class="operation multiplication">*</div>
            <div class="num">1</div>
            <div class="num">2</div>
            <div class="num">3</div>
            <div class="operation minus">-</div>
            <div class="num">0</div>
            <div class="clear">Clear</div>
            <div class="equal">=</div>
            <div class="operation plus">+</div>
        </div>
    </section>


    <script>

        const calcCore = {
            currentValue: 0,

            setValue(newValue) {
                this.currentValue = newValue;
                console.log("currentValue:", this.currentValue)
            },

            plus(addend) {
                this.setValue(this.currentValue + addend);
            },

            minus(subtrahend) {
                this.setValue(this.currentValue - subtrahend);
            },

            multiplication(multiplier) {
                this.setValue(this.currentValue * multiplier);
            },

            division(divisor) {
                this.setValue(this.currentValue / divisor);
            },
        };

        const resultElement = document.querySelector('.result')
        const stepsElement = document.querySelector('.steps')
        const btns = document.querySelectorAll('.button-group div')

        let steps = ''
        let operation = ''
        let second = 0
        let isEnding = false

        const isNumber = (item) => /[0-9]+/.test(item);

        const renderResult = () => {
            resultElement.innerHTML = calcCore.currentValue
        }

        const renderSteps = (value) => {
            stepsElement.innerHTML = value
        }

        // AC
        const clear = () => {
            calcCore.currentValue = 0
            resultElement.innerHTML = "整数运算"
            stepsElement.innerHTML = ""

            steps = ""
            operation = ""
            second = ""
            isEnding = false
        }

        const btnsClickEvent = () => {
            btns.forEach(item => {
                item.addEventListener('click', function (e) {
                    const value = e.target.innerHTML
                    const buttonClass = e.target.classList[0]

                    // 清空按钮
                    if (buttonClass === 'clear') {
                        clear()
                        return
                    }

                    // 数字按钮
                    if (isNumber(value)) {
                        const num = parseInt(value)
                        const currentValue = calcCore.currentValue

                        if (isEnding) {
                            alert("⚠ 是否清空并重新开始？")
                            clear()
                        }

                        if (!operation.length) { // 如果还没有保存运算符，初始化第一个数字
                            if (!parseInt(value)) {
                                alert("🤣 第一个数字为 “0”，我帮你清空，重新开始吧。")
                                clear()
                                return
                            }
                            if (currentValue === 0) {
                                calcCore.setValue(num)
                            } else {
                                console.log(currentValue)

                                if (currentValue >= 9999999999) {
                                    alert("🤣 数据过大，暂不支持")
                                    return
                                }
                                calcCore.setValue(currentValue * 10 + num)
                            }
                        } else { // 如果已经输入运算符，处理第二个数
                            if (!parseInt(second)) {
                                second = num
                            } else {
                                if (second >= 9999999999) {
                                    alert("🤣 数据过大，暂不支持")
                                    return
                                }
                                second = second * 10 + num
                            }
                        }
                    }

                    // 运算符按钮 + - * / 不含 =
                    if (buttonClass === 'operation') {
                        // eg: 3+2*5
                        if (operation.length) {
                            alert("现在只能算两个数😁")
                            return
                        }

                        // eg: +5
                        // fix: 000 + n
                        if (calcCore.currentValue === 0) {
                            alert("现在还不能这么玩😁")
                            return
                        }
                        operation = value
                    }

                    if (buttonClass === 'equal') {
                        if (!calcCore.currentValue) {
                            alert("🤣 直接输入“=”，我帮您清空了...")
                            return
                        }

                        if (isEnding) {
                            const res = confirm("💥本次计算已完成，是否清空并重新开始？")
                            if (res) {
                                clear()
                                return
                            } else {
                                return
                            }
                        }

                        switch (operation) {
                            case '+': calcCore.plus(second)
                                break;
                            case '-': calcCore.minus(second)
                                break;
                            case '*': calcCore.multiplication(second)
                                break;
                            case '/': calcCore.division(second)
                                break;
                        }

                        isEnding = true
                        renderResult()
                    }

                    steps += value
                    renderSteps(steps)

                    console.log("steps:", steps)
                    console.log("value:", value)
                })
            })
        }

        window.onload = () => btnsClickEvent()
    </script>
</body>
</html>
